<template>
  <div class="m-eq-detail">
    <a-spin :spinning="spinning">
      <!-- 基本信息 -->
      <div class="baseInfo">
        <div class="content-box">
          <div class="center-box">
            <div class="top">
              <div class="big-title">
                <div class="line"></div>
                <div class="title">基本信息</div>
              </div>
            </div>
            <div class="info">
              <div class="left">
                <div class="item">
                  <div class="lable">设备名称:</div>
                  <div class="content">{{detailObj.eqName}}</div>
                </div>
                <div class="item">
                  <div class="lable">品牌:</div>
                  <div class="content">{{detailObj.brand}}</div>
                </div>
                <div class="item">
                  <div class="lable">设备编号:</div>
                  <div class="content">{{detailObj.marking}}</div>
                </div>
                <div class="item">
                  <div class="lable">型号:</div>
                  <div class="content">{{detailObj.eqName}}</div>
                </div>
              </div>
              <div class="right">
                <!-- 常规设备 -->
                <div v-if="detailObj.type==1">
                  <img v-if="detailObj.usring!=3" src="../../assets/img/m_eqDetail/icon1.png" alt />
                  <img v-else src="../../assets/img/m_eqDetail/icon2.png" alt />
                </div>
                <!-- 自动化设备 -->
                <div v-else>
                  <img v-if="detailObj.statu==1" src="../../assets/img/m_eqDetail/icon1.png" alt />
                  <img v-else src="../../assets/img/m_eqDetail/icon3.png" alt />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备使用 -->
      <div class="use" v-if="useList.length>0">
        <div class="title-box">
          <div class="big-title">
            <div class="line"></div>
            <div class="title">设备使用</div>
          </div>
        </div>
        <div class="list">
          <div class="row" v-for="(item,index) in useList" :key="index">
            <div class="col col1">
              <div class="left">
                <div class="lable">
                  <img class="icon" src="../../assets/img/m_eqDetail/icon6.png" alt />
                </div>
                <div class="content">{{item.pro_name}}</div>
              </div>
              <div class="status">
                <div class="icon-box">
                  <div class="text">使用中</div>
                  <img src="../../assets/img/m_eqDetail/icon4.png" alt />
                </div>
              </div>
            </div>
            <div class="col">
              <div class="lable">所在位置</div>
              <div class="content">{{item.address}}</div>
            </div>
            <div class="col">
              <div class="lable">项目经理</div>
              <div class="content">{{item.real_name}}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备变动 -->
      <div class="change" v-if="changeList.length>0">
        <div class="top">
          <div class="big-title">
            <div class="line"></div>
            <div class="title">设备变动</div>
          </div>
        </div>
        <div class="timeline">
          <a-timeline>
            <a-timeline-item
              :color="index==0?'#3872ff':'gray'"
              v-for="(item,index) in changeList"
              :key="index"
            >
              <div class="item-box">
                <div class="left">
                  <span class="time">{{item.time}}</span>
                  <span class="status">使用在</span>
                </div>
                <div class="right">{{item.realName}}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>

      <!-- 设备检查 -->
      <div class="testing" v-if="detailObj.type==1 && detailObj.fileList.length>0">
        <div class="content-box">
          <div class="center-box">
            <div class="top">
              <div class="big-title">
                <div class="line"></div>
                <div class="title">设备检测</div>
              </div>
            </div>
            <div class="file-box" v-for="(item,index) in detailObj.fileList" :key="index">
              <div class="item">
                <span class="title">证书有效期</span>
                <span class="content">{{item.endTime ? $sliceTime(item.endTime) : ''}}</span>
              </div>
              <div class="item">
                <span class="title">剩余时间</span>
                <span class="content">{{item.fileOverTime >= 1 ? item.fileOverTime : 0}}天</span>
              </div>
              <div class="item">
                <div class="title">检定证书</div>
                <viewer>
                  <img :src="$setUrl(item.url,item.newfilename)" />
                </viewer>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 过程记录 -->
      <div class="process" v-if="detailObj.type==2 && processList.length>0">
        <div class="content-box">
          <div class="center-box">
            <div class="top">
              <div class="big-title">
                <div class="line"></div>
                <div class="title">过程记录</div>
              </div>
            </div>
            <div class="list">
              <div class="item" v-for="(item,index) in processList" :key="index">
                <div class="proName">
                  <span class="lable">项目</span>
                  <span class="name">{{item.projectName}}</span>
                </div>
                <div class="status">
                  <span v-if="item.type==1">安装过程</span>
                  <span v-if="item.type==2">巡查记录</span>
                  <span v-if="item.type==3">保养记录</span>
                  <span v-if="item.type==4">拆除记录</span>
                </div>
                <div class="file">
                  <div v-for="(obj,j) in item.userfileList" :key="j">
                    <viewer v-if="$getType(obj.type)=='image'">
                      <img :src=" obj.fileId ? $setUrl(obj.url,obj.newfilename) : obj.url" />
                    </viewer>
                    <video
                      v-if="$getType(obj.type)=='video'"
                      :src=" obj.fileId ? $setUrl(obj.url,obj.newfilename) : obj.url"
                      controls
                      webkit-playsinline
                    ></video>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 设备报废 -->
      <div class="editScrap">
        <div class="content-box">
          <div class="center-box">
            <div class="top">
              <div class="big-title">
                <div class="line"></div>
                <div class="title">设备报废</div>
              </div>
            </div>
            <div class="file-box" :style="{'color':brokenInfo.eqId ? '' : '#9A9A9A'}">
              <div class="item">
                <span class="title">报废时间</span>
                <span class="content">{{brokenInfo.time}}</span>
              </div>
              <div class="item">
                <span class="title">剩余时间</span>
                <span class="content">{{brokenInfo.remarks}}</span>
              </div>
              <div class="item">
                <span class="title">提交人</span>
                <span class="content">{{brokenInfo.realName}}</span>
              </div>
              <div class="item">
                <div class="title">附件</div>
                <viewer v-for="(item,index) in brokenInfo.userfileList" :key="index">
                  <img :src="$setUrl(item.url,item.newfilename)" />
                </viewer>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import {
  getEquipmentByType,
  equipmentUserInfo,
  equipmentChangeList,
  equimentBrokenInfo,
  getAllEquimentProcess,
  login,
} from "@/request/api";
import md5 from 'js-md5';
export default {
  props: {},
  data() {
    return {
      spinning: false,
      cid: "",
      detailObj: {}, //详情信息
      useList: [], //使用管理
      changeList: [], //变动列表
      processList: [], //过程记录列表
      brokenInfo: {
        time: "--",
        remarks: "--",
        realName: "--",
        userfileList: [],
      },
    };
  },
  components: {},
  async created() {
    this.cid = this.$route.query.cid;
    this.spinning = true;
    let { data } = await login({
      userName: "18688793445",
      passWord:md5("guangliantest"),
    });
    console.log(data);
    if (data.code === 200) {
      localStorage.setItem("token", data.result.token);
      localStorage.setItem("userInfo", JSON.stringify(data.result.userInfo));
      this.$store.commit('setUserInfo', data.result.userInfo)
      this.getEquipmentByType();
      this.equipmentUserInfo();
      this.equipmentChangeList();
      this.getAllEquimentProcess();
      this.equimentBrokenInfo();
    }
    this.spinning = false;
  },
  mounted() {},
  methods: {
    // 过程记录列表
    async getAllEquimentProcess() {
      let { data } = await getAllEquimentProcess({
        pageNum: 1,
        pageSize: 99999,
        eqId: this.cid,
      });
      if (data.code === 200) {
        this.processList = data.result.list;
        console.log("过程记录列表");
        console.log(this.processList);
      }
    },
    // 报废详情
    async equimentBrokenInfo() {
      let { data } = await equimentBrokenInfo({
        eqId: this.cid,
      });
      if (data.code === 200) {
        if (data.result) {
          this.brokenInfo = data.result;
        }
        console.log(this.brokenInfo);
      } else {
        this.$message.error(data.message);
      }
    },
    // 设备详情
    async getEquipmentByType() {
      let { data } = await getEquipmentByType({
        pageNum: 1,
        pageSize: 99999,
        eqId: this.cid,
      });
      if (data.code === 200) {
        this.detailObj = data.result.list[0];
        this.detailObj.deliveryTime = this.detailObj.deliveryTime.slice(0, 10);
        console.log(this.detailObj);
      }
    },
    // 使用管理列表
    async equipmentUserInfo() {
      let { data } = await equipmentUserInfo({
        pageNum: 1,
        pageSize: 99999,
        eqId: this.cid,
      });
      if (data.code === 200) {
        this.useList = data.result.list;
        console.log("使用管理列表");
        console.log(this.useList);
      }
      this.tableLoading = false;
    },
    // 变动列表
    async equipmentChangeList() {
      let { data } = await equipmentChangeList({
        pageNum: 1,
        pageSize: 99999,
        eqId: this.cid,
      });
      if (data.code === 200) {
        this.changeList = data.result.list;
        console.log("变动列表");
        console.log(this.changeList);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.big-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 0;
  .line {
    width: 2px;
    background: #1890ff;
    height: 12px;
  }
  .title {
    margin-left: 10px;
  }
}
.m-eq-detail {
  min-height: 100vh;
  background: #fefeff;
  font-size: 13px;
}
.baseInfo {
  padding: 10px 15px;
  .content-box {
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgba(106, 121, 176, 0.16);
    border-radius: 10px;
    .center-box {
      margin: 0 10px;
      .top {
        border-bottom: 1px solid #eee;
      }
      .info {
        padding: 0 10px 15px;
        display: flex;
        justify-items: center;
        justify-content: space-between;
        .left {
          flex-grow: 1;
          .item {
            margin-top: 10px;
            display: flex;
            .lable {
              font-weight: bold;
              // min-width: 60px;
            }
            .content {
              margin-left: 5px;
              color: #666;
            }
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          img {
            display: block;
            width: 50px;
            height: 45px;
          }
        }
      }
    }
  }
}
.use {
  background: #fff;
  box-shadow: 1px 2px 24px 0px rgba(106, 121, 176, 0.16);
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  .list .row:not(:last-child) {
    border-bottom: 1px solid #ccc;
  }
  .list {
    .row {
      padding: 0 20px;
      .lable {
        margin-right: 5px;
      }
    }
    .row .col:not(:first-child) .lable {
      width: 75px;
      color: #666;
    }
    .row .col:not(:last-child) {
      border-bottom: 1px solid #efefef;
    }
    .col {
      display: flex;
      padding: 9px 0;
      .icon {
        width: 19px;
        height: 19px;
        display: block;
      }
    }
    .col1 {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
      }
      .icon-box {
        margin-left: 5px;
        width: 44px;
        height: 20px;
        position: relative;
        .text {
          width: 44px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #3872ff;
          font-size: 10px;
          position: absolute;
        }
        img {
          width: 44px;
          height: 20px;
          display: block;
        }
      }
    }
  }
}
.change {
  .top {
    border-bottom: 1px solid #eee;
  }
  background: #fff;
  padding: 0 20px;
  box-shadow: 1px 2px 24px 0px rgba(106, 121, 176, 0.16);
  .timeline {
    margin-top: 20px;
  }
  .item-box {
    display: flex;
    justify-content: space-between;
    .left {
      .time {
        margin-right: 20px;
      }
    }
    .right {
      max-width: 100px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      overflow: hidden;
      -webkit-box-orient: vertical;
    }
  }
}
.testing {
  padding: 10px 15px;
  .content-box {
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0px 2px 24px 0px rgba(106, 121, 176, 0.16);
    border-radius: 10px;
    .center-box {
      margin: 0 10px;
      .top {
        border-bottom: 1px solid #eee;
      }
      .file-box {
        .item {
          margin-top: 20px;
          .title {
            margin-right: 20px;
            font-weight: bold;
          }
          img {
            width: 100px;
            height: 138px;
            display: block;
            margin-top: 10px;
          }
        }
      }
    }
  }
}
.editScrap {
  padding: 10px 15px;
  .content-box {
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgba(106, 121, 176, 0.16);
    border-radius: 10px;
    .center-box {
      margin: 0 10px;
      padding-bottom: 20px;
      .top {
        border-bottom: 1px solid #eee;
      }
      .file-box {
        .item {
          margin-top: 20px;
          .title {
            margin-right: 20px;
            font-weight: bold;
          }
          img {
            width: 100px;
            height: 138px;
            display: block;
            margin-top: 10px;
          }
        }
      }
    }
  }
}

.process {
  padding: 10px 15px;
  .content-box {
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgba(106, 121, 176, 0.16);
    border-radius: 10px;
    .center-box {
      margin: 0 10px;
      padding-bottom: 20px;
      .top {
        border-bottom: 1px solid #eee;
      }
      .list {
        .item {
          margin-top: 20px;
          .proName {
            .lable {
              font-weight: bold;
            }
            .name {
              margin-left: 20px;
            }
          }
          .status {
            color: #343434;
            font-size: 13px;
            margin-top: 10px;
          }
          .file {
            display: flex;
            flex-wrap: wrap;
            img {
              width: 160px;
              height: 94px;
              display: block;
              margin-top: 10px;
              margin-right: 10px;
            }
            video{
              width: 160px;
              height: 94px;
            }
          }
        }
      }
    }
  }
}
</style>
<style >
</style>